<template>
  <view class="transfer">
    <!-- 头部 -->
    <pagehead>划转
      <!-- #ifdef	H5 || APP-PLUS -->
			<view class="header-right" @tap.stop="$tools.jump('/pages/machineManage/transferlog')">划转记录</view>
			<!-- #endif -->
    </pagehead>
    <view class="search">
      <image @click="search()" :src="IMAGE_STATIC + '/images/icon-search.png'" class="ico" mode="heightFix" />
      <input type="text" @confirm="init()" v-model="chooseObj.start_sn_code" placeholder="请输入机具编号">
    </view>
    <view class="transfer-sort">
      <view>共: {{ total }}台</view>
      <view @tap.stop="modelSortShow = true;">筛选
        <image :src="IMAGE_STATIC + '/images/sort.png'" class="ico" mode="heightFix" />
      </view>
    </view>
     <!-- 列表 -->
   <view v-if="isShowPage">
    <view class="ul">
      <view class="li">
        <view class="p th">编号</view>
        <view class="p th">类型</view>
        <view class="p th">操作</view>
      </view>
      <view class="li" v-for="(item,index) in list" :key="index">
        <view class="p">{{(item.sn_code)}}</view>
        <view class="p">{{pos_name}}</view>
        <view class="p" @tap.stop="chooseItem(item)">
          <image v-if="item.isChecked" :src="IMAGE_STATIC + '/images/jian1.png'" class="ico" mode="heightFix" />
          <image v-else :src="IMAGE_STATIC + '/images/add1.png'" class="ico" mode="heightFix" />
        </view>
      </view>
    </view>
    <view class="initNoData" v-if="list.length == 0">—暂无内容—</view>
  </view>
    <view class="form-warp">
      <view class="form-box">
        <view class="form-item" >
          <view class="form-item-label">手机号</view>
          <view class="form-item-title" @tap.stop="modelSortShow1 = true;">
            {{ form.phone?form.phone:'请选择手机号' }}
          </view>
        </view>
      </view>
      <!-- #ifdef MP-WEIXIN -->
      <view class="text-center" @tap.stop="$tools.jump('/pages/machineManage/transferlog')">划转记录</view>
      <!-- #endif -->
    </view>
    <view class="fixed-box">
      <view class="bottom">
        <view class="btn all" @tap.stop="chooseAll">全选</view>
        <view class="btn sure" @tap.stop="submit()">划转</view>
      </view>
    </view>
     <!-- 筛选弹窗 -->
     <view v-if="modelSortShow" ref="sortPopu" class="model-bg" @tap="modelSortShow = false;"
     :style="{ top: `calc(88rpx + ${statusBarHeight}px)` }">
      <view class="modal" @tap.stop="modelSortShow = true;">
        <view class="sortPopu">
          <view class="title">机具编号区间</view>
          <u--input
            class="form-item-inner border-b"
            placeholder="起始机具编号"
            type="text"
            customStyle="marginLeft:40rpx;marginRight:40rpx;border-radius: 0;width:100%;margin-left:0;font-size:20rpx;height: 80rpx;"
            border="none"
            v-model="chooseObj.start_sn_code"
          ></u--input>
          <u--input
            class="form-item-inner border-b"
            placeholder="终末机具编号"
            type="text"
            customStyle="marginLeft:40rpx;marginRight:40rpx;border-radius: 0;width:100%;margin-left:0;font-size:20rpx;height: 80rpx;"
            border="none"
            v-model="chooseObj.end_sn_code"
          ></u--input>
          <view class="bottom-box">
            <view class="bottom">
              <view class="btn reset" @tap.stop="reset()">重置</view>
              <view class="btn sure" @tap.stop="sure()">确定</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 直推人筛选弹窗 -->
    <view v-if="modelSortShow1" ref="sortPopu" class="model-bg" @tap="modelSortShow1 = false;"
     :style="{ top: `calc(88rpx + ${statusBarHeight}px)` }">
      <view class="modal" @tap.stop="modelSortShow1 = true;">
        <view class="sortPopu">
          <view class="title">手机号</view>
          <u--input
            class="form-item-inner border-b"
            placeholder="请输入"
            type="text"
            customStyle="marginLeft:40rpx;marginRight:40rpx;border-radius: 0;width:100%;margin-left:0;font-size:20rpx;height: 80rpx;"
            border="none"
            @input="inputPhone"
            v-model="chooseObj.phone"
          ></u--input>
        </view>
        <view class="ul info-Box">
          <view class="li">
            <view class="p th">姓名</view>
            <view class="p th">手机号</view>
          </view>
          <view class="li" v-for="(item,index) in userList" :key="index">
            <view class="p" @tap.stop="choosePhone(item)">{{(item.real_name || '待实名')}}</view>
            <view class="p" @tap.stop="choosePhone(item)">{{item.sys_user_account}}</view>
          </view>
        </view>
      <view class="text-center" v-if="userList.length == 0">—暂无内容—</view>

      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      IMAGE_STATIC: this.$url.assetsPath, // 静态图片地址
      sn_code:'',
      total:0,
      form: {
        phone: "",
      },
      modelSortShow:false,
      modelSortShow1:false,
      statusBarHeight:0,
      chooseObj:{
        sn_code:'',
        start_sn_code:'',
        end_sn_code:'',
        phone:''
      },
      pos_name_id:'',
      pos_name:'',
      isShowPage:false,
      list:[],
      chooseList:[],
      userList: []
    };
  },
  // 下拉刷新
  onPullDownRefresh() {
    console.log('refresh');
    this.init();
    this.isLoadShow = true;
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
  onLoad(options) {
    if(options){
      this.pos_name_id = options.value1
      this.pos_name = options.value2
    }
    this.init()
    const that = this
    //获取手机型号
    uni.getSystemInfo({
      success: function (res) {
      that.statusBarHeight = res.statusBarHeight//状态栏高度
      that.platform = res.platform//机型
      console.log('platform',that.platform ,',statusBarHeight',that.statusBarHeight)
      }
    });
  },
  methods: {
    init(){
      this.total = 0
      this.lastId = '';
      this.isShowPage = false;
      this.list = []
      // this.getTotal()
      // this.getGoodsList()
      this.getTransferSncodeRange()
      this.getTransferUnderUser()
    },
     // 获取总数
     getTotal(){
      var data = {
        pos_name_id: this.pos_name_id, // 类型编号
        is_active:1,
      };
      this.$Ajax('/api/user/machinery/getUserMachineryTotal', data, res => {
        if (res.success) {
          this.total = res.data.userMachineryTotal.merchant_num
        }
      }, err => {
      }
      )
    },
    // 数据
    getGoodsList() {
      let that = this;
      var data = {
        pos_name_id: this.pos_name_id, // 类型编号
        is_active:0,
        last_id:this.lastId
      };
      console.log("data", data);
      uni.showLoading({
        mask: true
      })
      this.$Ajax('/api/user/machinery/getUserMachineryList', data, res => {
        uni.hideLoading();
        this.isShowPage = true;
        this.list = this.list.concat(res.data.userMachineryList);
        this.list.forEach(item => {
          this.$set(item,'isChecked',false)
        });
        if(res.data.userMachineryList.length>0){
          this.lastId = res.data.userMachineryList[res.data.userMachineryList.length-1].id
          this.lsShow = true
        }else{
          this.lsShow = false
        }
      }, err => {
        uni.hideLoading();
      }
      );
    },
    // 全选
    chooseAll(){
      this.isAll = !this.isAll
      if(this.isAll){
        this.chooseList = []
        this.list.forEach(item => {
          this.$set(item,'isChecked',true)
          this.chooseList.push(item.sn_code)
        });
      }else{
        this.list.forEach(item => {
          this.$set(item,'isChecked',false)
        });
        this.chooseList = []
      }
      console.log('chooseList',this.chooseList) 
    },
    // 单选
    chooseItem(item){
      this.$nextTick(()=>{
      if(item.isChecked){
        this.$set(item,'isChecked',false)
        const index = this.list.findIndex(key=>key == item.sn_code)
        console.log('index',index)
        this.chooseList.splice(index,1)
        this.isAll = false
      }else{
        this.$set(item,'isChecked',true)
        this.chooseList.push(item.sn_code)
        if(this.list.length == this.list.length){
          this.isAll = true
        }
      }
      console.log('isAll',this.isAll) 
      console.log('chooseList',this.chooseList) 
    })
    },
    // 查询划拨机具范围
    getTransferSncodeRange(){
      const data={
        pos_name_id:this.pos_name_id,
        start_sn_code:this.chooseObj.start_sn_code,
        end_sn_code:this.chooseObj.end_sn_code,
      }
      console.log('data',data) 
      uni.showLoading({
        mask: true
      })
      this.$Ajax("/api/user/machinery/getTransferSncodeRange", data, res => {
        this.isShowPage =true
        uni.hideLoading();
        if (res.success) {
          this.total = res.data.userMachineryList.length || 0
          this.list = res.data.userMachineryList
          console.log('list',this.list)
        }
      }, err => {
        uni.hideLoading();
      });
    },
    // 查询划拨会员信息
    getTransferUnderUser(){
      const data={
        key_word:this.chooseObj.phone ,
      }
      console.log('data',data) 
      this.$Ajax("/api/user/machinery/getTransferUnderUser", data, res => {
        if (res.success) {
          this.userList = res.data.userList || []
        }
      },'GET');
    },
    submit() {
      let that = this;
      if (that.chooseList.length == 0) {
        return that.$tools.toast("请选择机具编号");
      }
      if (!that.form.phone) {
        return that.$tools.toast("请输入手机号");
      }
      let data = {
        sn_code: that.chooseList.join(','),
        pos_name_id:this.pos_name_id,
        in_user_tel: that.form.phone
      };
      console.log("data", data);
      that.$Ajax("/api/user/machinery/machineryTransfer", data, res => {
        if (res.success) {
          that.$tools.toastJump(res.msg, './transferlog');
        }
      });
    },
    choosePhone(item){
      this.form.phone = item.sys_user_account
      this.modelSortShow1 = false
    },
    inputPhone(e){
      console.log(this.chooseObj.phone)
      if(this.chooseObj.phone.length>=3){
        this.getTransferUnderUser()
      }
      if(this.chooseObj.phone ==''){
        this.getTransferUnderUser()
      }
    },
    // 重置
    reset() {
      this.resFilds()
      this.modelSortShow = false
      this.getTransferSncodeRange()
    },
    sure(){
      this.modelSortShow = false
      this.getTransferSncodeRange()
    },
    // 清空数据
    resFilds(){
      this.chooseObj.start_sn_code =''
      this.chooseObj.end_sn_code =''
    },
  }
};
</script>

<style lang="scss" scoped>
@import "@/common/scss/operate";
.transfer{
  padding-bottom: 100rpx;
  .search{
    width: 93.6%;
    margin: auto;
    margin-top: 20rpx;
    height: 88rpx;
    line-height: 88rpx;
    background: #F1F1F1;
    border-radius: 16rpx;
    padding: 0 30rpx;
    @include flexLeft;
    box-sizing: border-box;
    .ico{
      width: 27rpx;
      height: 27rpx;
      margin-right:26rpx;
    }
    input{
      font-weight: 500;
      font-size: 28rpx;
      color: #333;
    }
  }
  &-sort {
    @include flexBetween;
    overflow: hidden;
    width: 93.6%;
    margin: auto;
    margin-top: 20rpx;
    padding: 0 12rpx;
    font-size: 28rpx;
    color: #000000;
    position: relative;
    height: 48rpx;
    line-height: 48rpx;
    box-sizing: border-box;
    .ico {
      width: 32rpx;
      height: 32rpx;
      display: inline-block;
      vertical-align: middle;
      margin-left: 8rpx;
    }

    .right {
      @include flexLeft;
    }

    .txt {
      margin-left: 14rpx;
    }
  }
  .ul {
    margin-top: 20rpx;
    max-height: 800rpx;
    overflow-y: auto;
  .li {
    @include flexLeft;
    text-align: center;
    font-size: 24rpx;
    color: #333333;
    .p {
      width: 50%;
      height: 90rpx;
      line-height: 90rpx;
      // padding: 24rpx 0;
      border-bottom: 1px solid #eee;
      border-left: 1px solid #eee;
    }

    .th {
      background: #EDEDED;
    }
    .ico {
      width: 48rpx;
      height: 48rpx;
      display: inline-block;
      vertical-align: middle;
    }
    .p:nth-of-type(1){
      width: 50%;
    }
    .p:nth-of-type(2){
      width: 30%;
    }
    .p:nth-of-type(3){
      width: 20%;
    }
  }

  .li:nth-of-type(2) .p {
    border-right: 1px solid #eee;
  }
  }
  .form-item-title{
    font-size: 28rpx;
    color: #333;
  }
  .fixed-box{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    .bottom{
      @include flexLeft;
      .btn{
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 16px;
        color: #fff;
      }
      .all{
        width: 60%;
        background: #000;
      }
      .sure{
        background: #AD2926;
        width: 40%;
      }
    }
  }
  .text-center{
  text-align: center;
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
  }
  .info-Box{
    .p{
      width: 50% !important;
    }
  }
}
.modal .sortPopu .bottom-box{
  border-top: none;
}
</style>
